<template>
    <div>
        <el-card class="card" style="min-width: 1200px">
            <div class="title">
                <h2 style="text-align: center">部门目标任务统计</h2>
            </div>
        </el-card>
        <br />
        <el-card>
            <!-- <el-button type="info" v-print="`#print`" style="margin-bottom: 10px">打 印</el-button> -->
            <el-button type="info" @click="exportExcel" style="margin-bottom: 10px">导 出</el-button>
            <el-row style="min-width: 1300px">
                <el-col :span="3" style="margin-right: 5px">
                    <span>年度：</span>
                    <el-select v-model="yearValue" filterable @change="searchTaskOfDepartment">
                        <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2" style="margin-right: 5px">
                    <span>任务属性：</span>
                    <el-select v-model="typeValue" filterable @change="searchTaskOfDepartment">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" style="margin-right: 5px">
                    <span>任务接受部门：</span>
                    <el-select v-model="departmentValue" filterable @change="searchTaskOfDepartment">
                        <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="2" style="margin-right: 5px">
                    <span>分配次级：</span>
                    <el-select v-model="attributeLevelValue" filterable @change="searchTaskOfDepartment">
                        <el-option v-for="item in attributeLevelOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="2">
                    <span>专项考核：</span>
                    <el-select v-model="testValue" filterable @change="searchTaskOfDepartment">
                        <el-option v-for="item in testOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <br />
            <el-table :data="tableData" style="width: 100%" id="print" border>
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column prop="name" label="任务标题" width="180"> </el-table-column>
                <el-table-column prop="type" label="任务属性">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 0">A类</div>
                        <div v-if="scope.row.type == 1">B类</div>
                        <div v-if="scope.row.type == 2">C类</div>
                    </template>
                </el-table-column>
                <el-table-column prop="allocDeptId" label="任务下发部门">
                    <!-- <template slot-scope="scope">
                        {{ findDepart(scope.row.allocDeptId) }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="acceptDeptId" label="任务接受部门">
                    <!-- <template slot-scope="scope">
                        {{ findDepart(scope.row.acceptDeptId) }}
                    </template> -->
                </el-table-column>
                <el-table-column prop="level" label="分配次级">
                    <template slot-scope="scope">
                        <div v-if="scope.row.level == 0">一级</div>
                        <div v-if="scope.row.level == 1">二级</div>
                        <div v-if="scope.row.level == 2">三级</div>
                    </template>
                </el-table-column>
                <el-table-column prop="isAssess" label="年度专项考核">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isAssess == 0">否</div>
                        <div v-if="scope.row.isAssess == 1">是</div>
                    </template>
                </el-table-column>
                <el-table-column prop="requirement" label="任务要求" width="600"> </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import yearTargetApi from '../../../../api/yearTagetApi';
import departmentApi from '../../../../api/department';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
    data() {
        return {
            tableData: [],
            departmentValue: '',
            departmentOptions: [],
            typeOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: 'A类'
                },
                {
                    value: '1',
                    label: 'B类'
                },
                {
                    value: '2',
                    label: 'C类'
                }
            ],
            typeValue: '',
            yearOptions: [],
            yearValue: '',
            yearLabel: '',
            testOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '-1',
                    label: '--'
                },
                {
                    value: '1',
                    label: '是'
                },
                {
                    value: '0',
                    label: '否'
                }
            ],
            testValue: '',
            attributeLevelOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '一级'
                },
                {
                    value: '1',
                    label: '二级'
                },
                {
                    value: '2',
                    label: '三级'
                }
            ],
            attributeLevelValue: '',
            asyncFlag: 0
        };
    },
    methods: {
        exportExcel() {
            /* generate workbook object from table */
            var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
            var wb = XLSX.utils.table_to_book(document.querySelector('#print'), xlsxParam);

            /* get binary string as output */
            var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '部门目标任务统计.xlsx');
            } catch (e) {
                if (typeof console !== 'undefined') {
                    console.log(e, wbout);
                }
            }
            return wbout;
        },
        // 获取所有年度目标任务
        async getTargetYear() {
            await yearTargetApi.findAll().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.yearOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.yearValue = this.yearOptions[0].value;
                this.yearLabel = this.yearOptions[0].label;
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
                this.asyncFlag = 1;
            });
        },
        async getDepartment() {
            await departmentApi.getAllDepart().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.departmentOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.departmentOptions.unshift({
                    value: '',
                    label: '全部'
                });
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        async searchTaskOfDepartment() {
            await departmentApi
                .searchTarget(this.yearValue, this.typeValue, this.departmentValue, this.attributeLevelValue, this.testValue)
                .then((res) => {
                    this.tableData = res.data;
                });
        },
        findDepart(id) {
            let obj = {};
            obj = this.departmentOptions.find((item) => {
                return item.value == id;
            });
            return obj.label;
        }
    },
    created() {
        this.getTargetYear();
        this.getDepartment();
    },
    watch: {
        //观察到下拉栏的最后一个联动框数值改变时候就调用
        asyncFlag() {
            this.searchTaskOfDepartment();
        }
    },
    mounted() {}
};
</script>

<style scoped>
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
</style>